<template>

    <div>
        <el-form :inline="true" :model="query" class="query-form" size="mini">
            <el-form-item class="query-form-item" label="区服">
                <el-select v-model="query.server" placeholder="请选择" clearable>
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item class="query-form-item" label="下单日期">
                <el-date-picker
                    v-model="query.orderTime"
                    type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00', '23:59:59']"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button-group>
                    <el-button type="primary" icon="el-icon-refresh" @click="onReset"></el-button>
                    <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
                </el-button-group>
            </el-form-item>
        </el-form>
        <div>
            <el-row :gutter="20" style="margin-top: 20px">
                <el-col :span="12">
                    <div>
                        <el-statistic
                            group-separator=","
                            :precision="2"
                            v-model="total.totalAmount"
                            title="总流水（￥）"
                        >
                            <template slot="formatter" >
                                <span style="color: #d62626">
                                     {{total.totalAmount}}
                                </span>
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div>
                        <el-statistic
                            group-separator=","
                            :precision="2"
                            :value="total.cj"
                            title="成交流水（￥）">
                            <template slot="formatter" >
                                <span style="color: #d62626">
                                     {{total.cj}}
                                </span>
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 20px">
                <el-col :span="12">
                    <div>
                        <el-statistic
                            group-separator=","
                            :precision="2"
                            :value="total.zycj"
                            title="自营成交流水（￥）"
                        >
                            <template slot="formatter" >
                                <span style="color: #d62626">
                                     {{total.zycj}}
                                </span>
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div>
                        <el-statistic
                            group-separator=","
                            :precision="2"
                            :value="total.dbcj"
                            title="担保成交流水（￥）">
                            <template slot="formatter" >
                                <span style="color: #d62626">
                                     {{total.dbcj}}
                                </span>
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-top: 20px">
                <el-col :span="12">
                    <div>
                        <el-statistic
                            group-separator=","
                            :precision="2"
                            :value="total.zys"
                            title="自营总订单数（个）"
                        >
                            <template slot="formatter" >
                                <span style="color: #d62626">
                                     {{total.zys}}
                                </span>
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div>
                        <el-statistic
                            group-separator=","
                            :precision="2"
                            :value="total.dbs"
                            title="担保总订单数（个）">
                            <template slot="formatter" >
                                <span style="color: #d62626">
                                     {{total.dbs}}
                                </span>
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-top: 20px">
                <el-col :span="12">
                    <div>
                        <el-statistic
                            group-separator=","
                            :precision="2"
                            :value="total.zycjs"
                            title="自营成交订单数（个）"
                        >
                            <template slot="formatter" >
                                <span style="color: #d62626">
                                     {{total.zycjs}}
                                </span>
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div>
                        <el-statistic
                            group-separator=","
                            :precision="2"
                            :value="total.dbcjs"
                            title="担保成交订单数（个）">
                            <template slot="formatter" >
                                <span style="color: #d62626">
                                     {{total.dbcjs}}
                                </span>
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 20px">
                <el-col :span="12">
                    <div>
                        <el-statistic
                            group-separator=","
                            :precision="2"
                            :value="value2"
                            title="当月自营成交流水（￥）"
                        >
                            <template slot="formatter" >
                                <span style="color: #d62626">
                                     {{total.dyzycj}}
                                </span>
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div>
                        <el-statistic
                            group-separator=","
                            :precision="2"
                            :value="value2"
                            title="当月担保成交流水（￥）">
                            <template slot="formatter" >
                                <span style="color: #d62626">
                                     {{total.dydbcj}}
                                </span>
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>

</template>

<script>
import {list, save, del, total} from "../../api/dnf/order";
import Upload from "../../components/File/Upload.vue";
import OrderChat from "./OrderChat.vue";
import {formatDateStr, parseTime} from "@/filtres";
const formJson = {

    id: "",
    auction: "",
    gameServer: "",
    price: "",
    charge: "",
    amount: "",
    type: "4",
    remark: "",
    platform: "自营"
};
export default {
    data() {
        return {
            like: true,
            value1: 4154.564,
            value2: 1314,
            title: "增长人数",
            selectRow: {},
            chatDialog: false,
            query: {
                title: "",
                page: 1,
                limit: 10,
                orderTime: [
                    parseTime(new Date(),'{y}-{m}-{d} 00:00:00'),
                    parseTime(new Date(),'{y}-{m}-{d} 23:59:59')
                ]
            },
            channelListInput: "",
            androidVersionListInput: "",
            iosVersionListInput: "",
            list: [],
            total: {
                totalAmount: 0,

            },
            options: [
                {//跨1,跨2,跨3A,跨3B,跨4,跨5,跨6,跨7/8
                    value: '跨1',
                    label: '跨1'
                },
                {
                    value: '跨2',
                    label: '跨2'
                },
                {
                    value: '跨3A',
                    label: '跨3A'
                },
                {
                    value: '跨3B',
                    label: '跨3B'
                },
                {
                    value: '跨4',
                    label: '跨4'
                },
                {
                    value: '跨5',
                    label: '跨5'
                },
                {
                    value: '跨6',
                    label: '跨6'
                },
                {
                    value: '跨7/8',
                    label: '跨7/8'
                }
            ],
            loading: true,
            index: null,
            formName: null,
            formMap: {
                add: "新增",
                edit: "编辑"
            },
            formLoading: false,
            formVisible: false,
            formData: formJson,
            formRules: {
                auction: [
                    {
                        required: true,
                        message: "请输入拍卖方式",
                        trigger: "blur"
                    }
                ],
                gameServer: [
                    {
                        required: true,
                        message: "请输入游戏区服",
                        trigger: "blur"
                    }
                ],
                price: [
                    {
                        required: true,
                        message: "请输入销售价",
                        trigger: "blur"
                    }
                ],
                charge: [
                    {
                        required: true,
                        message: "请输入手续费",
                        trigger: "blur"
                    }
                ],
                amount: [
                    {
                        required: true,
                        message: "请输入数量",
                        trigger: "blur"
                    }
                ],
                platform: [
                    {
                        required: true,
                        message: "请输入平台",
                        trigger: "blur"
                    }
                ],
            },
            deleteLoading: false
        };
    },
    components: {
        Upload,
        OrderChat
    },
    methods: {
        onReset() {
            this.$router.push({
                path: ""
            });
            this.query = {
                title: "",
                page: 1,
                limit: 10
            };
            this.getList();
        },
        onSubmit() {
            this.$router.push({
                path: "",
                query: this.query
            });
            this.getList();
        },
        handleSizeChange(val) {
            this.query.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.query.page = val;
            this.getList();
        },
        getList() {
            this.loading = true;
            total({
                ...this.query
            })
                .then(response => {
                    this.loading = false;
                    this.total = {
                        ...response.data
                    };
                    this.$set(this.total, 'totalAmount', response.data.totalAmount)
                })
                .catch(() => {
                    this.loading = false;
                    this.total = {};
                });
        },
        // 删除渠道
        handleChannelListClose(index) {
            console.log(index);
            // 更改值
            this.formData.channelList.splice(index, 1);
        },
        // 添加渠道白名单
        handleChannelListSubmit() {
            // 更改值
            if (
                this.channelListInput &&
                this.formData.channelList.length < 15
            ) {
                let arr = this.channelListInput.split(",");
                for (let i in arr) {
                    if (
                        arr[i] !== "" &&
                        (this.formData.channelList.length === 0 ||
                            this.formData.channelList.indexOf(arr[i]) < 0)
                    ) {
                        this.formData.channelList.push(arr[i]);
                    }
                }
                this.channelListInput = "";
                this.$refs.channelListRef.focus();
            }
        },
        // 刷新表单
        resetForm() {
            if (this.$refs["dataForm"]) {
                // 清空字段
                this.$refs["dataForm"].resetFields();
                // 清空验证信息表单
                this.$refs["dataForm"].clearValidate();
            }
        },
        // 隐藏表单
        hideForm() {
            // 更改值
            this.formVisible = !this.formVisible;
            return true;
        },
        gotoChat(row){
            this.selectRow = row;
            this.chatDialog = true
        },
        // 显示表单
        handleForm(index, row) {
            this.formVisible = true;
            // 刷新表单
            this.resetForm();
            this.formData = JSON.parse(JSON.stringify(formJson));
            if (row !== null) {
                this.formData = Object.assign({}, row);
            }
            this.formName = "add";
            if (index !== null) {
                this.index = index;
                this.formName = "edit";
            }
        },
        formSubmit() {
            this.$refs["dataForm"].validate(valid => {
                if (valid) {
                    this.formLoading = true;
                    let data = Object.assign({}, this.formData);
                    save(data, this.formName)
                        .then(response => {
                            this.formLoading = false;
                            if (response.code) {
                                this.$message.error(response.message);
                                return false;
                            }
                            this.$message.success("操作成功");
                            this.formVisible = false;
                            this.getList();
                            // if (this.formName === "add") {
                            //     // 向头部添加数据
                            //     data.adId = response.data.adId;
                            //     this.list.unshift(data);
                            // } else {
                            //     this.list.splice(this.index, 1, data);
                            // }
                        })
                        .catch(() => {
                            this.formLoading = false;
                        });
                }
            });
        },
        // 删除
        handleDel(index, row) {
            if (row.id) {
                this.$confirm("确认删除该记录吗?", "提示", {
                    type: "warning"
                })
                    .then(() => {
                        let para = { id: row.id };
                        this.deleteLoading = true;
                        del(para)
                            .then(response => {
                                this.deleteLoading = false;
                                if (response.code) {
                                    this.$message.error(response.message);
                                    return false;
                                }
                                this.$message("删除成功");
                                // 刷新数据
                                this.list.splice(index, 1);
                            })
                            .catch(() => {
                                this.deleteLoading = false;
                            });
                    })
                    .catch(() => {
                        this.$message.info("取消删除");
                    });
            }
        },
        onSelectPic(filePath, filePathUrl) {
            this.formData.pic = filePath;
            this.formData.picUrl = filePathUrl;
        }
    },
    filters: {
        statusFilterType(status) {
            const statusMap = {
                0: "gray",
                1: "success"
            };
            return statusMap[status];
        },
        statusFilterName(status) {
            const statusMap = {
                0: "禁用",
                1: "正常"
            };
            return statusMap[status];
        }
    },
    mounted() {},
    created() {
        // 将参数拷贝进查询对象
        let query = this.$route.query;
        this.query = Object.assign(this.query, query);
        this.query.limit = parseInt(this.query.limit);
        // 加载表格数据
        this.getList();
    }
};
</script>

<style type="text/scss" lang="scss">
</style>
